HTML - tags - meter tag

revision:

Content

"meter" tag : represents a scalar value or fractional value

"meter" tag : represents a scalar value or fractional value

top

The <meter> HTML element represents either a scalar value within a known range or a fractional value.This is also known as a gauge.
Examples: disk usage, the relevance of a query result, etc. The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag. Always add the <label> tag for best accessibility practices.

By default, the <meter> background is green and gray. With CSS the background color can be customized.

The <meter> tag is not supported in Edge 12 (or earlier).

Attributes: this element includes the global attributes. The tag also supports the following additional attributes:

form ; value: form_id;

specifies which form the <meter> element belongs to.

high ; value: number;

specifies the range that is considered to be a high value.

low ; value: number;

specifies the range that is considered to be a low value.

max ; value: number;

specifies the maximum value of the range.

min ; value: number;

specifies the minimum value of the range. Default value is 0.

optimum ; value: number;

specifies what value is the optimal value for the gauge.

value ; value: number; required.

Specifies the current value of the gauge.

syntax

top 
        <label> . . . </label>
        <meter> . . . </meter>

some examples

top
at 50/100 
code:
                <div>
                    <label class="example" for="fuel">fuel level:</label>
                    <meter id="fuel" min="0" max="100"  low="33" high="66" optimum="80"  value="50"> at 50/100 </meter>
                </div>
2 out of 10
60% 
code:
                <div class="spec">
                    <label class="example" for="disk_c">disk usage C:</label>
                    <meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
                    <label class="example" for="disk_d">disk usage D:</label>
                    <meter id="disk_d" value="0.6">60%</meter>
                </div>

He got a B on the exam.

code:
                <p class="example">He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
4 out of 10 4 out of 10
75% 75% 
code:
                <div class="spec">
                    <meter class="example" value="4" min="0" max="10">4 out of 10</meter> 4 out of 10<br>
                    <meter class="example" value="0.75">75%</meter> 75%
                </div>
  1. 25%
  2. 50%
  3. 75%
  4. 50%
Width:
123mm
Height:
25mm
code:
                <div class="spec">
                    <ol class="example">
                        <li><meter min="0" max="100" value="25">25%</meter></li>
                        <li><meter min="100" max="200" value="150">50%</meter></li>
                        <li><meter min="0" max="100" value="75">75%</meter></li>
                        <li><meter min="0" max="800" value="400">50%</meter></li>
                    </ol>
                    <dl class="example">
                        <dt>Width:</dt>
                        <dd><meter min="0" max="200" value="123" title="millimeters">123mm</meter></dd>
                        <dt>Height:</dt>
                        <dd><meter min="0" max="100" value="25" optimum="30" title="millimeters">25mm</meter></dd>
                    </dl>
                </div>